<template>
  <transition name="toast-slide">
    <div v-if="visible" class="toast-notification" :class="variantClass">
      <div class="toast-content">
        <div class="toast-icon">
          <i :class="iconClass"></i>
        </div>
        <div class="toast-text">
          <div class="toast-title" v-if="title">{{ title }}</div>
          <div class="toast-message">{{ message }}</div>
        </div>
        <button class="toast-close" @click="close">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="toast-progress" v-if="showProgress">
        <div class="toast-progress-bar" :style="{ width: progressWidth + '%' }"></div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ToastNotification',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      required: true
    },
    variant: {
      type: String,
      default: 'info',
      validator: value => ['info', 'success', 'warning', 'error'].includes(value)
    },
    duration: {
      type: Number,
      default: 4000
    },
    showProgress: {
      type: Boolean,
      default: true
    }
  },
  emits: ['close'],
  data() {
    return {
      progressWidth: 100,
      timer: null,
      progressTimer: null
    }
  },
  computed: {
    variantClass() {
      return `toast-${this.variant}`
    },
    iconClass() {
      const icons = {
        info: 'fas fa-info-circle',
        success: 'fas fa-check-circle',
        warning: 'fas fa-exclamation-triangle',
        error: 'fas fa-times-circle'
      }
      return icons[this.variant] || icons.info
    }
  },
  mounted() {
    this.startTimer()
  },
  beforeUnmount() {
    this.clearTimers()
  },
  methods: {
    startTimer() {
      if (this.duration > 0) {
        // Auto close timer
        this.timer = setTimeout(() => {
          this.close()
        }, this.duration)
        
        // Progress bar timer
        if (this.showProgress) {
          const interval = 50 // Update every 50ms
          const totalSteps = this.duration / interval
          let currentStep = 0
          
          this.progressTimer = setInterval(() => {
            currentStep++
            this.progressWidth = Math.max(0, 100 - (currentStep / totalSteps) * 100)
            
            if (currentStep >= totalSteps) {
              clearInterval(this.progressTimer)
            }
          }, interval)
        }
      }
    },
    clearTimers() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      if (this.progressTimer) {
        clearInterval(this.progressTimer)
        this.progressTimer = null
      }
    },
    close() {
      this.clearTimers()
      this.$emit('close')
    },
    pauseTimer() {
      this.clearTimers()
    },
    resumeTimer() {
      if (this.progressWidth > 0) {
        const remainingTime = (this.progressWidth / 100) * this.duration
        this.timer = setTimeout(() => {
          this.close()
        }, remainingTime)
      }
    }
  }
}
</script>

<style scoped>
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 320px;
  max-width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.05);
  border-left: 4px solid;
  z-index: 3000;
  overflow: hidden;
}

.toast-content {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  gap: 0.75rem;
}

.toast-icon {
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 0.125rem;
}

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.toast-message {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  word-wrap: break-word;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 12px;
}

.toast-close:hover {
  background: #f1f5f9;
  color: #64748b;
}

.toast-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.toast-progress-bar {
  height: 100%;
  transition: width 0.1s linear;
}

/* Variant Styles */
.toast-info {
  border-left-color: #3b82f6;
}

.toast-info .toast-icon {
  color: #3b82f6;
}

.toast-info .toast-progress-bar {
  background: #3b82f6;
}

.toast-success {
  border-left-color: #10b981;
}

.toast-success .toast-icon {
  color: #10b981;
}

.toast-success .toast-progress-bar {
  background: #10b981;
}

.toast-warning {
  border-left-color: #f59e0b;
}

.toast-warning .toast-icon {
  color: #f59e0b;
}

.toast-warning .toast-progress-bar {
  background: #f59e0b;
}

.toast-error {
  border-left-color: #ef4444;
}

.toast-error .toast-icon {
  color: #ef4444;
}

.toast-error .toast-progress-bar {
  background: #ef4444;
}

/* Slide Animation */
.toast-slide-enter-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.toast-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.toast-slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.toast-slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* Responsive Design */
@media (max-width: 480px) {
  .toast-notification {
    left: 10px;
    right: 10px;
    top: 10px;
    min-width: auto;
    max-width: none;
  }
  
  .toast-content {
    padding: 0.875rem;
  }
}

/* Multiple Toast Positioning */
.toast-notification:nth-child(1) { top: 20px; }
.toast-notification:nth-child(2) { top: calc(20px + 80px); }
.toast-notification:nth-child(3) { top: calc(20px + 160px); }
.toast-notification:nth-child(4) { top: calc(20px + 240px); }
.toast-notification:nth-child(5) { top: calc(20px + 320px); }
</style>